<template>
  <div class="review">
    <el-amap class="map-box" vid="amap2" :center="center" :zooms="zooms" :scrollWheel="true" style="height:240px">
      <el-amap-text v-for="text in texts" :key="text.text" :text="text.text" :offset="offset" :position="text.marker"></el-amap-text>
      <el-amap-marker v-for="(marker, index) in markers" :key="index" :position="marker" ></el-amap-marker>
    </el-amap>
    <van-dropdown-menu>
      <van-dropdown-item v-model="value1" :options="option1" />
    </van-dropdown-menu>
    <van-cell-group>
      <van-cell title="网点名称" value="网点1" />
      <van-cell title="网点位置" value="罗湖红岭国信证券大厦" />
    </van-cell-group>
    <div class="btnW" flex="main:justify">
      <van-button type="info">通过</van-button>
      <van-button type="info" plain>废弃</van-button>
    </div>
  </div>
</template>

<script>
  export default {
    name: "dragPage",
    data(){
      let self = this;
      return{
        center: [121.59996, 31.197646],
        zooms: [9, 19],
        text: '我的位置',
        offset: [0, 10],
        isText: false,
        plugin: [{
          pName: 'Geolocation',
          events: {
            init(o) {
              // o 是高德地图定位插件实例
              o.getCurrentPosition((status, result) => {
                if (result && result.position) {
                  let lng = result.position.lng;
                  let lat = result.position.lat;
                  self.center = [lng, lat];
                  self.isText = true;
                  self.searchOption.city = result.addressComponent.city
                  self.$nextTick();
                }
              });
            }
          }
        }],
        searchOption: {
          city: '上海',
          citylimit: false
        },
        markers: [
          [121.59996, 31.197646],
          [121.40018, 31.197622],
          [121.69991, 31.207649]
        ],
        value1: 0,
        option1: [
          { text: '请选择网点', value: 0 },
          { text: '网点1', value: 1 },
          { text: '网点2', value: 2 },
          { text: '网点3', value: 3 },
        ],
        texts: []
      }
    },
    methods: {
      onSearchResult(pois) {
        let latSum = 0;
        let lngSum = 0;
        if (pois.length > 0) {
          pois.forEach(poi => {
            let {lng, lat} = poi;
            lngSum += lng;
            latSum += lat;
          });
          let center = {
            lng: lngSum / pois.length,
            lat: latSum / pois.length
          };
          this.center = [center.lng, center.lat];
          this.isText = false;
        }
      }
    },
    mounted() {
      this.text = this.option1[this.value1].text
      let arr = []
      this.markers.map((o, i) => {
        arr.push({text: this.option1[i+1].text, marker: o})
      })
      this.texts = arr
      console.log(arr);
      
    }
  }
</script>
<style lang="less">
  .review{
    position: relative;
    margin-top: 1px;
    .map-box{
      width: 100%;
      height: 300px;
      .amap-overlay-text-container{
        color: #1989fa;
        padding: 4px;
        margin-top: 5px;
      }
    }
    .search-box {
      position: absolute;
      top: 15px;
      left: 4%;
      width: 91%;
      height: 35px;
      z-index: 10000;
    }
    .btnW{
      padding: 15px 4%;
      .van-button{
        width: 48%;
      }
    }
  }
</style>